<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Basic page needs
    ============================================ -->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer" />
    <title>系统消息</title>
    <meta name="description" content="">

    <!-- Mobile specific metas
    ============================================ -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- fonts
    ============================================ -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

    <!-- Favicon
    ============================================ -->
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/image/user/home/favicon.png}">

    <!-- CSS  -->

    <!-- Bootstrap CSS
    ============================================ -->
    <link rel="stylesheet" th:href="@{/css/user/home/bootstrap.min.css}">

    <!-- font-awesome CSS
    ============================================ -->
    <link rel="stylesheet" th:href="@{/css/user/home/font-awesome.min.css}">

    <!-- owl.carousel CSS
    ============================================ -->
    <link rel="stylesheet" th:href="@{/css/user/home/owl.carousel.css}">

    <!-- owl.theme CSS
    ============================================ -->
    <link rel="stylesheet" th:href="@{/css/user/home/owl.theme.css}">

    <!-- owl.transitions CSS
    ============================================ -->
    <link rel="stylesheet" th:href="@{/css/user/home/owl.transitions.css}">

    <!-- fancybox CSS
    ============================================ -->
    <link rel="stylesheet" th:href="@{/css/user/home/fancybox/jquery.fancybox.css}">

    <!-- animate CSS
    ============================================ -->
    <link rel="stylesheet" th:href="@{/css/user/home/animate.css}">

    <!-- meanmenu CSS
    ============================================ -->
    <link rel="stylesheet" th:href="@{/css/user/home/meanmenu.min.css}" media="all"/>

    <!-- normalize CSS
    ============================================ -->
    <link rel="stylesheet" th:href="@{/css/user/home/normalize.css}">

    <!-- RS-slider CSS
    ============================================ -->
    <link rel="stylesheet" type="text/css" th:href="@{/lib/user/home/rs-plugin/css/settings.css}" media="screen"/>

    <!-- main CSS
    ============================================ -->
    <link rel="stylesheet" th:href="@{/css/user/home/main.css}">

    <!-- style CSS
    ============================================ -->
    <link rel="stylesheet" th:href="@{/css/user/home/style.css}">

    <!-- responsive CSS
    ============================================ -->
    <link rel="stylesheet" th:href="@{/css/user/home/responsive.css}">

    <!-- modernizr js
    ============================================ -->
    <script th:src="@{/js/user/home/vendor/modernizr-2.8.3.min.js}"></script>
    <style>
        table {
            background: #c8d4e4;
            border-radius: 20px;
            width: 85%;
            height: 100px;
            color: darkslategrey;
        }
        pre {
            background: #c8d4e4;
            border: 0;
        }
        .context{
            position: relative;
            height: 100px;
            font-size: 18px;
            line-height: 24px;
        }
    </style>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->

<!-- header start -->
<header th:include="user/common/model::header"></header>
<!-- header end -->
<!-- entry-header-area start -->
<div class="entry-header-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="entry-header">
                    <h1 class="entry-title">系统消息</h1>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- entry-header-area end -->

<!-- cart-main-area start -->
<div class="cart-main-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12" align="center">
                <table th:if="${noticeList.size()==0}" style="background: white;width: 85%;height: 350px;text-align: center;border: 1px solid grey">
                    <tr>
                        <td>
                            <h3 style="color: grey">暂无系统消息通知！</h3>
                        </td>
                    </tr>
                </table>
                <table th:each="notice : ${noticeList}">
                    <tr style="height: 36px">
                        <td style="width: 50px;"></td>
                        <td style="position:relative;font-size: 24px">
                            <br/><br/>
                            <b>[[${notice.getTitle()}]]</b>
                            <br/><br/>
                        </td>
                        <td>
                            <a href="#" th:onclick="delNotice('[[${notice.getId()}]]')" style="font-weight: bold;font-size: 30px;float: right;
                                right: 15px;position: relative">
                                ×
                            </a>
                            <script>
                                function delNotice(noticeId){
                                    if (confirm("确定删除此消息？")){
                                        window.location = "/user/del-notice?id="+noticeId;
                                    }
                                    return false;
                                }
                            </script>
                        </td>
                    </tr>
                    <tr style="height: 12px">
                        <td style="width: 50px;"></td>
                        <td style="position:relative;font-size: 12px"
                            th:text="${#dates.format(notice.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}">
                        </td>
                        <td style="width: 50px"></td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <hr style="color: black"/>
                        </td>
                    </tr>
                    <tr style="overflow-x: hidden;">
                        <td style="width: 50px;"></td>
                        <td class="context">
                            <pre>[[${notice.getContext()}]]</pre>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <hr/>
                        </td>
                    </tr>
                    <br/>
                </table>
            </div>
        </div>
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<!-- cart-main-area end -->

<!-- footer start -->
<footer th:include="user/common/model::footer"></footer>
<!-- footer end -->
<!-- JS -->
<script th:include="user/common/model::alertMsg"></script>
<!-- jquery js -->
<script th:src="@{/js/user/home/vendor/jquery-1.12.0.min.js}"></script>

<!-- price-slider js -->
<script th:src="@{/js/user/home/price-slider.js}"></script>

<!-- bootstrap js -->
<script th:src="@{/js/user/home/bootstrap.min.js}"></script>

<!-- owl.carousel.min js -->
<script th:src="@{/js/user/home/owl.carousel.min.js}"></script>

<!-- jquery.scrollUp js -->
<script th:src="@{/js/user/home/jquery.scrollUp.min.js}"></script>

<!-- jquery.collapse js -->
<script th:src="@{/js/user/home/jquery.collapse.js}"></script>
<!-- mixitup js -->

<script th:src="@{/js/user/home/jquery.mixitup.min.js}"></script>

<!-- fancybox js -->
<script th:src="@{/js/user/home/fancybox/jquery.fancybox.pack.js}"></script>

<!-- jquery-counterup js -->
<script th:src="@{/js/user/home/jquery.counterup.min.js}"></script>
<script th:src="@{/js/user/home/waypoints.min.js}"></script>

<!-- jquery-meanmenu js -->
<script th:src="@{/js/user/home/jquery.meanmenu.js}"></script>

<!-- RS-Plugin JS
============================================ -->
<script type="text/javascript" th:src="@{/lib/user/home/rs-plugin/js/jquery.themepunch.tools.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/user/home/rs-plugin/js/jquery.themepunch.revolution.min.js}"></script>
<script th:src="@{/lib/user/home/rs-plugin/rs.home.js}"></script>

<!-- plugins js -->
<script th:src="@{/js/user/home/plugins.js}"></script>

<!-- main js -->
<script th:src="@{/js/user/home/main.js}"></script>
</body>
</html>
